<template>
  <view class="login-container">
    <div class="main">
      <div class="head">
        <div class="title">欢迎使用抖票票</div>
        <div class="desc">未注册过的抖音号将自动创建账号</div>
      </div>
      <div class="btns" @tap="onDouyinLogin">
        <nut-button
          block
          :disabled="!isAgreeAccord"
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          ><div>抖音号登录</div></nut-button
        >
      </div>
      <div class="accord">
        <div class="checkbox">
          <nut-checkbox v-model="isAgreeAccord"></nut-checkbox>
        </div>
        <div class="txt">
          <div class="a">已阅读并同意</div>
          <div class="b" @click="skipUserAgreement">《用户协议》</div>
          <div class="b" @click="skipPrivacyAgreement">《隐私协议》</div>
        </div>
      </div>
    </div>
  </view>
</template>

<script setup lang="ts">
import Taro from "@tarojs/taro";
import { ref, onMounted } from "vue";
import * as loginApi from "../../api/login";
import { storeToRefs } from "pinia";

import { useUserStore } from "../../store";
import { useDidShow } from "@tarojs/taro";
const router = Taro.useRouter();
const userStore = useUserStore();
const { Userinfo, shareUserId } = storeToRefs(userStore);

const isAgreeAccord = ref(false);
const sourceUrl = ref("");
const code = ref("");
onMounted(() => {
  if (router.params.url) {
    sourceUrl.value = decodeURIComponent(router.params.url);
  }
});
useDidShow(() => {
  Taro.login({
    success: async function (res) {
      if (res.code) {
        Taro.showLoading({ title: "加载中", mask: true });
        code.value = res.code;
        Taro.hideLoading();
      } else {
        // Taro.showToast({
        //   title: "获取code失败",
        //   icon: "error",
        //   duration: 2000,
        // });
      }
    },
  });
});
const onDouyinLogin = async () => {
  try {
    Taro.showLoading({ title: "登录中...", mask: true });
    const userRes = await Taro.getUserProfile({ desc: "获取用户信息" });
    console.log(userRes, "----");
    // return;,

    let loginRes = await loginApi
      .dyLogin(code.value, userRes.userInfo, shareUserId.value)
      .catch((error) => {
        console.log(error);

        Taro.showToast({
          title: error.errMsg,
          icon: "error",
          duration: 2000,
        });
      });
    if (loginRes) {
      userStore.setToken(loginRes["token"]);
      userStore.getUserinfo();
      // 跳转至原url
      toSourceUrl();
    } else {
      Taro.showToast({
        title: "获取code失败",
        icon: "error",
        duration: 2000,
      });
    }
    Taro.hideLoading();

    // Taro.login({
    //   success: async function (res) {
    //     if (res.code) {
    //       Taro.showLoading({ title: "加载中", mask: true });
    //       const userRes = await Taro.getUserProfile({ desc: "获取用户信息" });
    //       console.log(userRes, "---------------");

    //       let loginRes = await loginApi
    //         .dyLogin(res.code, userInfo)
    //         .catch((error) => {
    //           Taro.showToast({
    //             title: error.errMsg,
    //             icon: "error",
    //             duration: 2000,
    //           });
    //         });
    //       // 如果登录成功
    //       if (loginRes) {
    //         userStore.setToken(loginRes["token"]);
    //         userStore.getUserinfo();
    //         // 跳转至原url
    //         toSourceUrl();
    //       }
    //       Taro.hideLoading();
    //     } else {
    //       Taro.showToast({
    //         title: "获取code失败",
    //         icon: "error",
    //         duration: 2000,
    //       });
    //     }
    //   },
    // });
  } catch (error) {
    console.log(error);

    Taro.showToast({
      title: "拒绝授权",
      icon: "error",
      duration: 2000,
    });
    return error;
  }
};
const toSourceUrl = () => {
  const url = sourceUrl.value;
  if (!url) {
    Taro.navigateBack();
    return;
  }
  const tabbarPageList = [
    "/pages/home/index",
    "/pages/cinema/index",
    "/pages/order/index",
    "/pages/my/index",
  ];
  if (tabbarPageList.includes(url)) {
    Taro.switchTab({
      url: sourceUrl.value,
    });
  } else {
    Taro.redirectTo({
      url: sourceUrl.value,
    });
  }
};
const skipUserAgreement = () => {
  Taro.navigateTo({
    url: "/pages/user-agreement/index",
  });
};
const skipPrivacyAgreement = () => {
  Taro.navigateTo({
    url: "/pages/privacy-agreement/index",
  });
};
</script>

<style lang="scss">
.login-container {
  display: flex;
  flex-direction: column;
  padding: 5rem 0;
  .main {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    .head {
      display: flex;
      flex-direction: column;
      text-align: center;
      .title {
        font-size: 0.8rem;
        color: #15181d;
        font-weight: 500;
        line-height: 1.6rem;
      }
      .desc {
        font-size: 0.6rem;
        line-height: 1.2rem;
        color: #858a99;
      }
      margin-bottom: 1.5rem;
    }
    .btns {
      .nut-button {
        border: none !important;
      }
    }
    .accord {
      display: flex;
      flex-direction: row;
      height: 1rem;
      margin-top: 1.5rem;
      align-items: center;
      justify-content: center;
      .checkbox {
        width: 1rem;
      }
      .txt {
        display: flex;
        flex-direction: row;
        .a {
          font-size: 0.6rem;
          color: #858a99;
        }
        .b {
          font-size: 0.6rem;
          margin: 0 0.2rem;
          color: #ee0a24;
        }
      }
    }
  }
}
</style>
